@import '../../app/variablesV2.css';

.dropdown {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--border-radius-standard);
  box-shadow: var(--box-shadow-standard);
  box-sizing: border-box;
  display: flex;
  line-height: 1;
  min-width: 145px;
  padding: 24px 0;
  opacity: 0;
  position: absolute;
  right: -1px;
  transform: scale(0.9);
  transform-origin: calc(100% - 25px) -5px;
  transition:
    opacity var(--animation-speed-faster) linear,
    transform var(--animation-speed-faster) linear,
    visibility var(--animation-speed-faster) linear;
  top: calc(100% + 5px);
  visibility: hidden;
  width: 100%;

  &.show {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    z-index: var(--overlay-index);
  }

  & .dropdownArrow {
    color: var(--color-white);
    height: 9px;
    font-size: 0;
    position: absolute;
    right: 10px;
    stroke: var(--color-light-gray);
    top: -9px;
    width: 36px;

    & > svg {
      display: block;
    }
  }

  &:global(.showLeft) {
    right: calc(100% + 5px);
    transform-origin: calc(100% + 5px) 5px;
    top: -1px;

    & .dropdownArrow {
      right: -18px;
      transform-origin: bottom;
      transform: rotate(90deg);
      top: 9px;
    }
  }
}

.optionsHolder {
  display: flex;
  flex-direction: column;
  width: 100%;

  & .option {
    background-color: var(--color-white);
    box-sizing: border-box;
    color: var(--color-content-light);
    cursor: pointer;
    font-family: var(--heading-font);
    font-size: var(--button-font-size-s);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    padding: 8px 24px;
    transition: background var(--animation-speed-fast) linear, color var(--animation-speed-fast) linear;
    width: 100%;

    &:hover {
      background-color: var(--color-primary-standard);
      color: var(--color-white);
    }
  }
}
